<script>
import request from "../../../../utils/request"
import { handleUrlParams } from "../../../../utils"
import empty from "../../../../components/empty.vue"
import checkIsVip from "@/components/checkIsVip/index.vue"
import uniLoadMore from "@/uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue"
export default {
  name: "index",
  components: { empty, checkIsVip, uniLoadMore },
  data() {
    return {
      queryParams: {
        classId: "",
        typeCode: "",
      },
      typeName: "",
      questionList: [],
      isEmpty: false,
      pagination: {
        current: 1,
        size: 15,
      },
      loadMoreStatusText: "more",
    }
  },
  onLoad(query) {
    this.queryParams.classId = query.classId
    this.queryParams.typeCode = query.typeCode
    this.typeName = decodeURIComponent(query.typeName)
    if (this.typeName) {
      uni.setNavigationBarTitle({
        title: this.typeName,
      })
    }
    this.resetPagination()
  },
  methods: {
    //获取题目列表
    getQuestionList() {
      return new Promise((resolve, reject) => {
        request({
          url: "topic/getPageByClient",
          data: {
            ...this.queryParams,
            ...this.pagination,
          },
          errorHandle: true,
        })
          .then((data) => {
            this.questionList.push(...data.records)
            if (!data.records || data.records.length === 0) this.isEmpty = true
            if (this.questionList.length >= data.total) {
              this.loadMoreStatusText = "noMore"
            } else {
              this.loadMoreStatusText = "more"
            }
            resolve()
          })
          .catch(() => {
            this.loadMoreStatusText = "more"
            reject()
          })
      })
    },
    //重置分页并重新加载数据
    resetPagination() {
      this.pagination.current = 1
      this.questionList = []
      this.isEmpty = false
      uni.showLoading({
        title: "加载中",
      })
      this.getQuestionList().finally(() => {
        uni.hideLoading()
      })
    },
    //跳转到刷题页面
    async itemClick(item) {
      //检查该题目所设置的付费规则
      //设置了vip规则则跳转到vip开通界面
      if (item.businessRules === "MemberFree") {
        if (!(await this.$refs.checkIsVip.checkIsVip())) return
      }
      uni.navigateTo({
        url: handleUrlParams("/practice/pages/index/index", {
          structureId: item.structureId,
          typeCode: item.typeCode,
        }),
      })
    },
  },
  onReachBottom() {
    if (this.loadMoreStatusText === "noMore") return
    this.pagination.current++
    this.loadMoreStatusText = "loading"
    this.getQuestionList()
  },
}
</script>

<template>
  <view class="page">
    <view class="type-name">{{ typeName }}</view>
    <view class="question-list" v-if="!isEmpty">
      <view class="question-item" v-for="item in questionList" :key="item.topicId" @click="itemClick(item)">
        <view class="left">
          <view class="title">
            <text>{{ item.structureYear }}年</text>
            <text>\t</text>
            <text>{{ item.structureParent }}</text>
          </view>
          <view class="desc">{{ item.structureName }}</view>
        </view>
        <view class="right">
          <view class="red-point" v-if="!item.topicScoreId"></view>
        </view>
      </view>
      <uniLoadMore :status="loadMoreStatusText"></uniLoadMore>
    </view>
    <empty v-else height="calc(100vh - 164rpx)"></empty>
    <checkIsVip ref="checkIsVip"></checkIsVip>
  </view>
</template>

<style scoped lang="scss">
.page {
  padding: 50rpx;
  .type-name {
    font-size: 34rpx;
    font-weight: bold;
  }
  .question-list {
    margin-top: 20rpx;
    .question-item {
      padding: 30rpx 0;
      border-bottom: 2rpx solid #e8e8e8;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left {
        margin-right: 20rpx;
        .title {
          font-size: 34rpx;
        }
        .desc {
          font-size: 30rpx;
          color: var(--text-color-light);
          margin-top: 10rpx;
        }
      }
      .right {
        .red-point {
          width: 20rpx;
          height: 20rpx;
          background-color: #ff0000;
          border-radius: 50%;
        }
      }
    }
  }
}
</style>
